<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> depth.html </title>
	<style>
		body {
			background-color: #2a2a2a;
			color: #dcdcdc;
		}
	</style>
	<pre id="branchs"></pre>
</head>

<body>
	<script>
		const TRACK_SIGN = { 0: '▁', 1: '▄', 2: '█' };
		const ROBOT_SIGN = { 0: '□', 1: '■' };
		const WIDTH_SIGN = { 0: '０', 1: '１', 2: '２' };

		/* translate rule*/
		/*
		const TR = {
			0: {
				0: { B: 0, T: 0 },
				1: { B: 1, T: 0 },
				2: { B: 0, T: 1 },
			},
			1: {
				0: { B: 1, T: 1 },
				1: { B: 0, T: 2 },
				2: { B: 1, T: 2 },
			}
		};
		*/
		const TR = {
			0: {
				0: [0, 0],
				1: [1, 0],
				2: [0, 1],
			},
			1: {
				0: [1, 1],
				1: [0, 2],
				2: [1, 2],
			}
		};
	</script>
	<script>
		const POOL_SIZE = 216;
		// const DEPTH_NOTES = new Set();
		const DEPTH_BRANCHS = {};
		let flag = false, handler;

		const makeTree = (Bs, Ts) => {
			// console.log('makeTree', Bs.join(''), Ts.join(''), DEPTH_BRANCHS.size);

			if (Object.keys(DEPTH_BRANCHS).length >= POOL_SIZE) {
				flag = true;
				return;
			}

			for (let i = 0; i < 2; i++) {
				for (let j = 0; j < 3; j++) {
					calcNote([...Bs, i], [...Ts, j]);
				}
			}
		};

		const calcNote = (Bs, Ts) => {
			const depth = POOL_SIZE * POOL_SIZE;
			let curr = toHex(Bs, Ts);

			if (curr > 0) {
				let Bn = [0, ...Bs], Tn = [...Ts]
				for (let i = 0; i < Tn.length; i++) {
					[Bn[i], Tn[i]] = TR[Bn[i]][Tn[i]];
				}

				if (Bn[Bn.length - 1]) {
					Bn[Bn.length - 1] = 0;
					Tn.push(2);
				} else {
					Bn.pop();
				}

				let next = toHex(Bn, Tn);
				DEPTH_BRANCHS[curr] = { curr, next, depth, add: false };

				console.log('calcNote', curr, next);
			}

			// Recursion Here.
			setTimeout(() => {
				makeTree(Bs, Ts);
			}, 10);

			return null;
		};

		const toHex = (Bs, Ts) => {
			if (Bs.length !== Ts.length) return -1;
			let hex = 0;
			for (let i = 0; i < Bs.length; i++) {
				hex = hex * 10 + Bs[i] * 3 + Ts[i];
			}
			return hex;
		}

		const organizeTree = () => {
			let array = Array.from(Object.keys(DEPTH_BRANCHS)).sort((a, b) => b - a);
			let curr, next, stack = [];

			const popStack = depth => {
				for (let j = 0; j < stack.length; j++) {
					stack[j].add = true;
					stack[j].depth = depth - j;
				}
			};

			for (let i = 0; i < array.length; i++) {
				curr = DEPTH_BRANCHS[array[i]];
				next = DEPTH_BRANCHS[curr.next];
				stack.length = 0;

				do {
					// console.log("curr  %o: next %o", curr, next);

					if (!next) {
						popStack(curr.depth + 1);
						break;
					}

					stack.push(curr);

					if (curr.curr <= 3) {
						popStack(stack.length - 1);
						break;
					}

					if (next.add) {
						popStack(next.depth + stack.length);
						break;
					}

					curr = next;
					next = DEPTH_BRANCHS[curr.next];
				} while (true)

			}

			drawSVG();
		}

		const drawSVG = () => {
			console.clear();
			console.dir(DEPTH_BRANCHS);

			document.querySelector("#branchs").textContent = JSON.stringify(DEPTH_BRANCHS);
		};


		// makeTree([], []);

		const mfun = () => {
			calcNote([0], [1]);
			calcNote([0], [2]);
			calcNote([1], [0]);
			calcNote([1], [1]);
			calcNote([1], [2]);

			// Draw Tree View
			handler = setInterval(() => {
				if (!flag) return;
				clearInterval(handler);

				organizeTree();

				console.log('check...');
			}, 2000);
		}

		// mfun();


		const Bi = [0, 1];
		const Ti = [0, 1, 2];

		const toHex2 = (Bs, Ts) => {
			let hex = 0;
			hex = hex * 10 + Bs[0] * 3 + Ts[0];
			hex = hex * 10 + Bs[1] * 3 + Ts[1];
			return hex;
		}

		const calcReflect = (Bs, Ts) => {

			let curr = toHex2(Bs, Ts);

			let Bn = [0, ...Bs], Tn = [...Ts]
			for (let i = 0; i < Tn.length; i++) {
				[Bn[i], Tn[i]] = TR[Bn[i]][Tn[i]];
			}

			// if (Bn[Bn.length - 1]) {
			// 	Bn[Bn.length - 1] = 0;
			// 	Tn.push(2);
			// } else {
			// 	Bn.pop();
			// }

			let next = toHex2(Bn, Tn);

			// console.log('R:', curr.toString().split('').join(',') + ' : ' + next.toString().split('').join(','));

			document.querySelector("#branchs").textContent += curr.toString().split('').join(',') + ' : ' + next.toString().split('').join(',') + '\n';

		};

		const getReflect = () => {
			for (let i1 = 0; i1 < 2; i1++)
				for (let i3 = 0; i3 < 3; i3++)
					for (let i2 = 0; i2 < 2; i2++)
						for (let i4 = 0; i4 < 3; i4++)
							calcReflect([Bi[i1], Bi[i2]], [Ti[i3], Ti[i4]]);
		}

		const toHex3 = (Bs, Ts) => {
			let hexArray = [];
			for (let i = 0; i < Ts.length; i++) {
				hexArray[i] = Bs[i] * 3 + Ts[i];
			}
			return hexArray;
		}

		const map3 = []

		const calcReflect3 = (Bs, Ts) => {
			let curr = toHex3(Bs, Ts);
			let Bn = [0, ...Bs], Tn = [...Ts]
			for (let i = 0; i < Tn.length; i++) {
				[Bn[i], Tn[i]] = TR[Bn[i]][Tn[i]];
			}
			let next = toHex3(Bn, Tn);
			map3.push({ curr, next });
		}

		const getReflect3 = () => {
			for (let i1 = 0; i1 < 2; i1++)
				for (let j1 = 0; j1 < 3; j1++)
					for (let i2 = 0; i2 < 2; i2++)
						for (let j2 = 0; j2 < 3; j2++)
							for (let i3 = 0; i3 < 2; i3++)
								for (let j3 = 0; j3 < 3; j3++)
									calcReflect3([Bi[i1], Bi[i2], Bi[i3]], [Ti[j1], Ti[j2], Ti[j3]]);

			document.querySelector("#branchs").textContent = map3.map(e => e.curr.join(',') + " : " + e.next.join(',') + '\n').join('');

			let map3_sort = map3.sort((a, b) => ((a.next[1] - b.next[1]) << 3) + (a.next[2] - b.next[2]));
			console.log(map3_sort.map(e => e.curr.join(',') + " : " + e.next.slice(1,3).join(',') + '\n').join(''));
		}

	</script>
</body>

</html>